<template>
  <div>
    <el-row :getter='20'>
      <el-col :span="6">
        <!-- 商品三级分类 -->
        <common-tree v-if="this.tree.data && this.tree.data.length > 0" :tree="tree"></common-tree>
      </el-col>
      <el-col :span="18">
        <!-- 品牌列表 -->
        <common-table v-if="this.tree.data && this.tree.data.length > 0" :tableProperties="tableProperties">
        </common-table>
      </el-col>
    </el-row>

    <!-- 新增属性分组 -->
    <common-dialog-form :from="addAttrGroup"></common-dialog-form>
    <!-- 修改属性分组 -->
    <common-dialog-form :from="updateAttrGroup"></common-dialog-form>

  </div>
</template>

<script>
  import CommonFormEnum from '../../../components/enum/CommonFormEnum'
  import CommonDialogForm from '../../../components/commonDialogForm'
  import CommonTableEnum from "../../../components/enum/CommonTableEnum"
  import CommonTable from '../../../components/commonTable'
  import CommonTree from '../../../components/commonTree/index.vue'
  import {
    errorMessage,
    successMessage,
    successMessageBox
  } from '../../../utils/Message.js'
  export default {
    name: 'attrGroup',
    components: {
      CommonTree,
      CommonTable,
      CommonDialogForm
    },
    data() {
      return {
        // 单击树选择的节点
        selectNodeData: null,
        // 新增属性分组
        addAttrGroup: {
          show: false,
          from: {
            originalData: {
              attrGroupName: null,
              sort: null,
              descript: null,
              icon: null,
              catelogId: null,
            },
            title: '新增属性分组',
            columns: [{
                label: '组名',
                prop: 'attrGroupName',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '排序',
                prop: 'sort',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '描述',
                prop: 'descript',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '组图标',
                prop: 'icon',
                type: CommonFormEnum.SingleUpload,
                required: true,
                labelWidth: '120px'
              },
            ],
            footBut: [{
              api: this.addAttrGroupEvent,
              text: '添加'
            }],
          }
        },
        // 修改属性分组
        updateAttrGroup: {
          show: false,
          from: {
            originalData: {
              attrGroupName: null,
              sort: null,
              descript: null,
              icon: null,
              catelogId: null,
            },
            title: '修改属性分组',
            columns: [{
                label: '组名',
                prop: 'attrGroupName',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '排序',
                prop: 'sort',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '描述',
                prop: 'descript',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '组图标',
                prop: 'icon',
                type: CommonFormEnum.SingleUpload,
                required: true,
                labelWidth: '120px'
              },
            ],
            footBut: [{
              api: this.updateAttrGroupEvent,
              text: '确定'
            }],
          }
        },
        // 商品三级分类
        tree: {
          treeProps: {
            label: 'name',
            children: 'children'
          },
          data: [],
          buttons: [],
          nodeClick: (node, data) => {
            this.selectNodeData = data
            this.tableProperties.tableView.refresh++
          }
        },
        // 属性分组table
        tableProperties: {
          tabs: {
            defaultActiveName: 0,
            tabPane: [{
              label: '所有属性分组',
              prop: null
            }, ]
          },
          headBut: [{
            label: '新增属性分组',
            click: () => {
              this.addAttrGroup.show = true
            }
          }],
          tableView: {
            refresh: 0,
            isPaging: true,
            api: 'product/productattrgroup/selectProductAttrGroup',
            otherApiParam: {
              catelogId: null
            },
            columns: [{
                label: '组名',
                type: CommonTableEnum.TEXT,
                prop: 'attrGroupName',
              },
              {
                label: '排序',
                type: CommonTableEnum.TEXT,
                prop: 'sort',
              },
              {
                label: '描述',
                type: CommonTableEnum.TEXT,
                prop: 'descript',

              },
              {
                label: '组图标',
                type: CommonTableEnum.IMAGE,
                prop: 'icon',
              },
            ],
            footBut: [{
                label: '修改',
                icon: 'el-icon-plus',
                click: (row, index) => {
                  this.updateAttrGroup.from.originalData = row
                  this.updateAttrGroup.show = true
                }
              },
              {
                label: '删除',
                icon: 'el-icon-delete',
                click: (row, index) => {
                  this.delAttrGroupEvent(row)
                }
              },
            ],
            beforeRequest: (data) => {
              data.catelogId = this.tree.data[0].catId
              if (this.selectNodeData) data.catelogId = this.selectNodeData.catId
              return data
            },
          },
        }
      }
    },
    created() {
      this.init()
    },
    methods: {

      /* 初始化商品三级分类 */
      init() {
        new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productcategory/classification'),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            this.tree.data = data.data.data
            if (this.tree.data && this.tree.data.length > 0)
              this.selectNodeData = this.tree.data[0]
          })
        })
      },
      // 新增属性分组
      addAttrGroupEvent(data) {
        data.catelogId = this.selectNodeData.catId
        if (!data.catelogId) return errorMessage("请先选择商品分类")
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productattrgroup/save'),
            method: 'post',
            data: this.$http.adornData(data, false)
          }).then((data) => {
            successMessage("新增属性分组成功");
            this.addAttrGroup.show = false;
            this.tableProperties.tableView.refresh++
          }).catch(error => {
            errorMessage("新增属性分组失败")
          })
        })
      },
      // 修改属性分组
      updateAttrGroupEvent(data) {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productattrgroup/update'),
            method: 'post',
            data: this.$http.adornData(data, false)
          }).then((data) => {
            successMessage("修改属性分组成功");
            this.updateAttrGroup.show = false;
            this.tableProperties.tableView.refresh++
          }).catch(error => {
            errorMessage("修改属性分组失败")
          })
        })
      },
      // 删除属性分组
      delAttrGroupEvent(data) {
        successMessageBox({
          content: '确定要删除属性分组吗？'
        }).then(res => {
          return new Promise((resolve, reject) => {
            this.$http({
              url: this.$http.getRequest('product/productattrgroup/delete'),
              method: 'post',
              data: this.$http.adornData(data.attrGroupId, false)
            }).then((data) => {
              successMessage("删除属性分组成功");
              this.tableProperties.tableView.refresh++
            }).catch(error => {
              errorMessage("删除属性分组失败")
            })
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
